<div *ngIf="node" class="cx-navigation__item nav-item" ngbDropdown>
  <a
    *ngIf="node.children && !node.title; else nodeWithChildren"
    ngbDropdownToggle
  >
    Reorder
  </a>
  <ng-template #nodeWithChildren>
    <span
      *ngIf="node.children; else noChildren"
      ngbDropdownToggle
      class="cx-navigation__link nav-link"
      role="link"
      id="{{ node.title }}"
      >{{ node.title }}</span
    >
  </ng-template>
  <ng-template #noChildren>
    <a
      [routerLink]="{ url: node.url } | cxTranslateUrl"
      class="cx-navigation__link nav-link"
      id="{{ node.title }}"
      >{{ node.title }}
    </a>
  </ng-template>
  <ng-container [ngSwitch]="dropdownMode">
    <ng-container *ngSwitchCase="'list'">
      <div
        ngbDropdownMenu
        class="cx-navigation__child-list"
        [attr.aria-label]="node.title"
        role="list"
      >
        <div
          role="listitem"
          *ngFor="let subCategory of node.children"
          class="dropdown-item cx-navigation__child-item"
        >
          <ng-container *ngIf="subCategory.url">
            <a
              [routerLink]="{ url: subCategory.url } | cxTranslateUrl"
              class="cx-navigation__child-link"
              >{{ subCategory.title }}
            </a>
          </ng-container>
          <ng-container *ngIf="!subCategory.url">
            <a class="cx-navigation__child-link">{{ subCategory.title }} </a>
          </ng-container>
          <a
            [routerLink]="{ url: subCategoryChild.url } | cxTranslateUrl"
            *ngFor="let subCategoryChild of subCategory.children"
            >{{ subCategoryChild.title }}
          </a>
        </div>
      </div>
    </ng-container>

    <ng-container *ngSwitchCase="'column'">
      <div
        ngbDropdownMenu
        class="cx-navigation__child-list-columns"
        [attr.aria-label]="node.title"
      >
        <div
          class="cx-navigation__child-column"
          *ngFor="let subCategory of node.children"
        >
          <ng-container *ngIf="subCategory.url">
            <a
              role="link"
              [routerLink]="{ url: subCategory.url } | cxTranslateUrl"
              class="cx-navigation__child-link cx-navigation__column-title"
              >{{ subCategory.title }}
            </a>
          </ng-container>
          <ng-container *ngIf="!subCategory.url">
            <a class="cx-navigation__child-link cx-navigation__column-title"
              >{{ subCategory.title }}
            </a>
          </ng-container>

          <div
            *ngFor="let subCategoryChild of subCategory.children"
            class="dropdown-item cx-navigation__child-column-item"
          >
            <a
              role="link"
              [routerLink]="{ url: subCategoryChild.url } | cxTranslateUrl"
              class="cx-navigation__child-link"
              >{{ subCategoryChild.title }}
            </a>
          </div>
        </div>
      </div>
    </ng-container>
  </ng-container>
</div>
